<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./resources/templates/appTemplate.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <ui:define name="firstname">
        <f:view>
            <h:outputText value="#{userSession.user.firstname}"/>
        </f:view>
    </ui:define>
    <ui:define name="lastname">
        <f:view>
            <h:outputText value="#{userSession.user.lastname}"/>
        </f:view>
    </ui:define>
    <ui:define name="email">
        <f:view>
            <h:outputText value="#{userSession.user.email}"/>
        </f:view>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#userID").css("display", "none");
                    $("#userID").fadeIn('slow');
                }
                //]]> 
            </script> 
            <h:form id="playlistForm" rendered="#{userSession.connected}">
                <p:contextMenu for="playlists" style="width: 200px;">
                    <p:menuitem icon="ui-icon-search" value="Titres" update=":detailForm:playlistDetail" oncomplete="playlistDetailDialog.show()"/>
                    <p:menuitem icon="ui-icon-transferthick-e-w" value="Partager avec..." update=":playlistShareForm:playlistShare" oncomplete="playlistShareDialog.show()"/>
                    <p:menuitem icon="ui-icon-pencil" value="Modifier" update=":playlistUpdateForm:playlistUpdate" oncomplete="playlistUpdateDialog.show()"/>
                    <p:menuitem icon="ui-icon-close" value="Supprimer" update=":deleteConfirmForm:confirmDialog" oncomplete="confirmation.show()"/>
                </p:contextMenu>
                <h1><h:outputText value="Mes playlists"/></h1>
                <p:commandButton icon="ui-icon-plusthick" onclick="createPlaylistDialog.show();" value="Nouvelle playlist"/>
                <p:dataTable id="playlists" value="#{userSession.user.playlists}" var="playlist" paginator="true" rows="50" widgetVar="playlistTable"
                             emptyMessage="Aucune playlist enregistrée !"  styleClass="playlistTable"
                             paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} Aller à la page {JumpToPageDropdown}" 
                             rowsPerPageTemplate="25, 50"
                             rowKey="#{playlist.id}" selection="#{myPlaylist.selectedPlaylist}" selectionMode="single">
                    <f:facet name="header">  
                        <p:outputPanel>  
                            <h:outputText value="Recherche sur toutes les colonnes : " />  
                            <p:inputText id="globalFilter" onkeyup="playlistTable.filter()" style="width:150px" />  
                        </p:outputPanel>  
                    </f:facet>
                    <p:column style="width: 5%;">
                        <p:commandButton rendered="#{playlist.nbMusics != 0}" icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playPlayList(#{playlist.id}, '#{songList.addSlashes(playlist.JSon)}');"/>
                    </p:column>
                    <p:column sortBy="#{playlist.title}" filterBy="#{playlist.title}" style="width: 30%;">
                        <f:facet name="header">
                            <h:outputText value="Playlist"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.title}"/>
                    </p:column>
                    <p:column sortBy="#{playlist.creationDate}" filterBy="#{playlist.creationDate}" style="width: 15%;">
                        <f:facet name="header">
                            <h:outputText value="Date de création"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.creationDate}">
                            <f:convertDateTime pattern="dd/MM/yyyy à HH:mm" />
                        </h:outputText>
                    </p:column>
                    <p:column sortBy="#{playlist.description}" filterBy="#{playlist.description}" style="width: 40%;">
                        <f:facet name="header">
                            <h:outputText value="Description"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.description}"/>
                    </p:column>
                    <p:column style="width: 10%;">
                        <f:facet name="header">
                            <h:outputText value="Durée"/><br/>
                        </f:facet>
                        <h:outputText value="#{playlist.totalTimeStr} (#{playlist.nbMusics} titres)"/>
                    </p:column>
                    <f:facet name="footer">  
                        Total : #{fn:length(userSession.user.playlists)} playlists créés.
                    </f:facet> 
                </p:dataTable>
            </h:form>
            <h:form id="createPlaylistForm">
                <p:dialog header="Nouvelle playlist" widgetVar="createPlaylistDialog" resizable="false"  
                          width="400" showEffect="clip" hideEffect="fold" id="dialog">  

                    <h:panelGrid id="playlist_edit_display" columns="2" cellpadding="4">  

                        <div id="create_playlist_form">
                            <h:form>
                                <p:growl id="messages" />
                                <table>
                                    <tr>
                                        <td><h:outputLabel value="Titre" for="ptitle"/></td>
                                        <td>
                                            <h:inputText id="ptitle" value ="#{myPlaylist.playlistTitle}" required="true" requiredMessage="Veuillez entrer un titre de playlist"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><h:outputLabel value="Description" for="pdesc"/></td>
                                        <td>
                                            <h:inputText id="pdesc" value ="#{myPlaylist.description}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="150"><h:outputLabel value="Publique" for="ppublic"/></td>
                                        <td>
                                            <h:selectBooleanCheckbox id="ppublic" value ="#{myPlaylist.publicPlaylist}"/>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2" align="right"><h:commandButton value="Créer" action="#{myPlaylist.createPlayList()}"/>
                                        </td>
                                    </tr>
                                </table>
                            </h:form>
                        </div>

                    </h:panelGrid>  

                </p:dialog>

            </h:form>
            <h:form id="detailForm">
                <p:dialog header="#{myPlaylist.selectedPlaylist.title}" widgetVar="playlistDetailDialog" resizable="false"  
                          width="900" height="400" showEffect="clip" hideEffect="fold" id="playlistDetail">  

                    <p:commandButton rendered="#{myPlaylist.selectedPlaylist.nbMusics != 0}" icon="ui-icon-play" value="Lire la playlist" ajax="true" 
                                     oncomplete="playPlayList(#{myPlaylist.selectedPlaylist.id}, '#{songList.addSlashes(myPlaylist.selectedPlaylist.JSon)}');"/>
                    <br/><br/>
                    <table id="playlistDescTable" style="width:90%;">
                        <thead>
                            <th>Date de création</th>
                            <th>Description</th>
                            <th>Public</th>
                            <th>Nombre de titres</th>
                            <th>Durée totale</th>
                            <th>Joué</th>
                        </thead>
                        <tr>
                            <td>
                                <h:outputText value="#{myPlaylist.selectedPlaylist.creationDate}">
                                    <f:convertDateTime pattern="dd/MM/yyyy à HH:mm" />
                                </h:outputText>
                            </td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.description}" /></td>
                            <td>
                                <h:outputText value="Oui" rendered="#{!myPlaylist.selectedPlaylist.privatePlaylist}"/>  
                                <h:outputText value="Non" rendered="#{myPlaylist.selectedPlaylist.privatePlaylist}"/>  
                            </td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.nbMusics}" /></td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.totalTimeStr}" /></td>
                            <td><h:outputText value="#{myPlaylist.selectedPlaylist.nbTimesPlayed} fois" /></td>
                        </tr>
                    </table>
                    <br/>

                    <!--
                    <h:panelGrid id="playlist_detail_display" columns="2" cellpadding="4">  
                        <h:outputText value="Date de création : " />  
                        <h:outputText value="#{myPlaylist.selectedPlaylist.creationDate}">
                            <f:convertDateTime pattern="dd/MM/yyyy à HH:mm" />
                        </h:outputText>
                        <h:outputText value="Description : " />  
                        <h:outputText value="#{myPlaylist.selectedPlaylist.description}" />
                        <h:outputText value="Public : " />  
                        <h:outputText value="Oui" rendered="#{!myPlaylist.selectedPlaylist.privatePlaylist}"/>  
                        <h:outputText value="Non" rendered="#{myPlaylist.selectedPlaylist.privatePlaylist}"/>  
                        <h:outputText value="Nombre de titres : " />
                        <h:outputText value="#{myPlaylist.selectedPlaylist.nbMusics}" />
                        <h:outputText value="Durée totale : " />  
                        <h:outputText value="#{myPlaylist.selectedPlaylist.totalTimeStr}" />  
                        <h:outputText value="Joué : " />  
                        <h:outputText value="#{myPlaylist.selectedPlaylist.nbTimesPlayed} fois" />  
                        <p:commandButton rendered="#{myPlaylist.selectedPlaylist.nbMusics != 0}" icon="ui-icon-play" value="Lire la playlist" ajax="true" oncomplete="playPlayList(#{playlist.id}, '#{songList.addSlashes(myPlaylist.selectedPlaylist.JSon)}');"/>
                    </h:panelGrid>  
                    <br />  
                    -->

                    <table id="sharedUserTable">
                        <ui:repeat value="#{myPlaylist.selectedPlaylist.sharedUsers}" var="shareduser" varStatus="loop">
                            <tr>
                                <td><h:graphicImage width="50" library="images" value="#{shareduser.avatar}"/></td>
                                <td><h:outputText value="#{shareduser.firstname} #{shareduser.lastname}"/></td>
                            </tr>
                        </ui:repeat>
                    </table>

                    <ui:fragment rendered="#{myPlaylist.selectedPlaylist.nbMusics != 0}">
                        <h:outputText value="Genres : "/>
                        <ui:repeat value="#{myPlaylist.selectedPlaylist.genres}" var="genre" varStatus="loopGenres">
                            <h:outputText value="#{genre.label}"/>
                            <h:outputText rendered="#{loopGenres.index ge 0 and loopGenres.index lt myPlaylist.selectedPlaylist.genres.size() - 1}" value=", "/>
                        </ui:repeat>
                        <table id="playlistSongTable">
                            <thead>
                                <th></th>
                                <th></th>
                                <th>Titre</th>
                                <th>Artiste</th>
                                <th>Album</th>
                                <th>Durée</th>
                            </thead>
                            <ui:repeat value="#{myPlaylist.selectedPlaylist.musics}" var="song" varStatus="loop">
                                <tr>
                                    <td><h:graphicImage width="50" library="images" value="#{song.coverImage}" /></td>
                                    <td><p:commandButton icon="ui-icon-play" value="Lire" ajax="true" oncomplete="playSongFromPlayList(#{song.id}, #{loop.index}, '#{songList.addSlashes(myPlaylist.selectedPlaylist.JSon)}');"/></td>
                                    <td><h:outputText value="#{song.title}"/></td>
                                    <td><h:outputText value="#{song.artist.artistName}"/></td>
                                    <td><h:outputText value="#{song.album.title}"/></td>
                                    <td><h:outputText value="#{song.totalTimeStr}"/></td>
                                </tr>
                            </ui:repeat>
                        </table>
                    </ui:fragment>
                </p:dialog>
            </h:form>

            <h:form id="playlistUpdateForm">
                <p:dialog header="Modification de : #{myPlaylist.selectedPlaylist.title}" widgetVar="playlistUpdateDialog" resizable="false"  
                          width="600" height="150" showEffect="clip" hideEffect="fold" id="playlistUpdate">  
                    <div id="update_playlist_form">
                        <p:growl id="updateFormMessages" />
                        <table>
                            <tr>
                                <td><h:outputLabel value="Titre" for="uptitle"/></td>
                                <td>
                                    <h:inputText id="uptitle" value="#{myPlaylist.playlistTitle}" required="true" requiredMessage="Veuillez entrer un titre de playlist"/>
                                </td>
                            </tr>
                            <tr>
                                <td><h:outputLabel value="Description" for="updesc"/></td>
                                <td>
                                    <h:inputText id="updesc" value="#{myPlaylist.description}"/>
                                </td>
                            </tr>
                            <tr>
                                <td width="150"><h:outputLabel value="Publique" for="uppublic"/></td>
                                <td>
                                    <h:selectBooleanCheckbox id="uppublic" value="#{myPlaylist.publicPlaylist}"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="right">
                                    <h:commandButton value="Modifier" action="#{myPlaylist.editPlaylist()}"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                </p:dialog>
            </h:form>

            <h:form id="playlistShareForm">
                <p:dialog header="Partager la playlist" widgetVar="playlistShareDialog" resizable="false"  
                          width="400" showEffect="clip" hideEffect="fold" id="playlistShare">  
                    <ui:fragment rendered="#{userSession.user.friends.size() != 0}">
                        <h:panelGrid id="playlist_Shareform_display" columns="2" cellpadding="4"> 
                            <h:outputLabel value="Avec qui ?" for="friendSelect"/>
                            <h:selectOneMenu id="friendSelect" converter="#{friendBean.userConverter}" value="#{myPlaylist.selectedFriendToShareWith}" 
                                             required="true" requiredMessage="Veuillez sélectionner un ami avec qui partager votre playlist.">
                                <f:selectItems value="#{userSession.user.friends}" var="friend" itemLabel="#{friend.firstname} #{friend.lastname}" itemValue="#{friend}" />
                            </h:selectOneMenu>

                            <h:outputText value=""/>  
                            <h:commandButton value="Partager" action="#{myPlaylist.share()}"/>
                        </h:panelGrid>  
                    </ui:fragment>
                    <ui:fragment rendered="#{userSession.user.friends.size() == 0}">
                        Vous n'avez pas encore ajouté d'ami.
                    </ui:fragment>
                </p:dialog>  
            </h:form>

            <h:form id="deleteConfirmForm">
                <p:confirmDialog id="confirmDialog" message="Êtes-vous sûr de vouloir supprimer cet playlist ?"  
                                 header="Suppression de la playlist : #{myPlaylist.selectedPlaylist.title}" severity="alert" widgetVar="confirmation">  
                    <p:commandButton id="confirm" value="Supprimer" update=":playlistForm" oncomplete="confirmation.hide()"  
                                     actionListener="#{myPlaylist.delete()}" />  
                    <p:commandButton id="decline" value="Annuler" onclick="confirmation.hide()" type="button" />   
                </p:confirmDialog>  
            </h:form>

        </f:view>
    </ui:define>
</ui:composition>
